<template>
  <div class="main">
		<home-header></home-header>
		<home-swiper :list="swiperList"></home-swiper>
		<home-icons :list="iconList"></home-icons>
		<home-recommend :list="recommendList"></home-recommend>
		<home-weekend :list="weekendList"></home-weekend>
	</div>
</template>

<script>
	import { mapState } from 'vuex'
	import axios from 'axios'
	import HomeHeader from "./components/Header"
	import HomeSwiper from "./components/Swiper"
	import HomeIcons from "./components/Icons"
	import HomeRecommend from "./components/Recommend"
	import HomeWeekend from "./components/Weekend"
	
export default {
  name: 'Home',
  data () {
    return {
      lastCity: '',
      swiperList: [],
      iconList: [],
      recommendList: [],
      weekendList: []
    }
  },
	components:{
		HomeHeader,HomeSwiper,HomeIcons,HomeRecommend,HomeWeekend
	},
	computed: {
		...mapState(['city'])
	},
	methods: {
		getHomeInfo () {
			axios.get('/api/index.json?city=' + this.city)
				.then(this.getHomeInfoSucc)
		},
		getHomeInfoSucc (res) {
			res = res.data
			if (res.ret && res.data) {
				const data = res.data
				this.swiperList = data.swiperList
				this.iconList = data.iconList
				this.recommendList = data.recommendList
				this.weekendList = data.weekendList
			}
		}
	},
	mounted () {
		this.lastCity = this.city
		this.getHomeInfo()
	},
	activated () {
		if (this.lastCity !== this.city) {
			this.lastCity = this.city
			this.getHomeInfo()
		}
	}
}
</script>

<style lang="scss" scoped>

</style>
